<template>
  <div>
    <el-upload
      action=""
      :class="['uploader', pixelClass]"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :http-request="uploadImg"
    >
      <el-button size="small" type="primary">upload</el-button>
      <div v-show="progressFlag" class="imgProgress">
        <el-progress type="circle" :percentage="progressPercent" />
      </div>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    pixelClass: {
      type: String,
      default: ''
    },
    nIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      showImg: '',
      fileSize: 50 * 1024 * 1024, // 50MB
      progressPercent: 0,
      progressFlag: false
    };
  },
  mounted() {
    if (this.imgUrl) {
      this.showImg = this.imgUrl;
    }
  },
  methods: {
    beforeUpload(file) {
      // 仅有类型判断，未加大小判断
      const isIMG =
        file.type === 'image/jpg' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/png';
      if (!isIMG) {
        this.$message.error('上传图片仅支持jpg、jpeg、png格式!');
        return false;
      }
      if (file.size > this.fileSize) {
        this.$message.warning('The file size exceeds the 50MB limit');
        return false;
      }
      return true;
    },
    uploadImg(params) {
      const formData = new FormData();
      formData.append('file', params.file);
      axios({
        url: this.baseApi + '/erp/dealer/product/image/upload', // 上传商品图片地址
        method: 'post',
        data: formData,
        withCredentials: true,
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: (progressEvent) => {
          this.progressFlag = true;
          this.progressPercent = parseInt(
            (progressEvent.loaded / progressEvent.total) * 100
          );
        }
      })
        .then((res) => {
          this.progressFlag = false;
          this.progressPercent = 0;
          if (res.data.code === 200) {
            this.showImg = res.data.data.uri;
            this.$emit('getImg', [res.data.data, this.nIndex]);
          } else {
            this.$message.error(res.data.messgae);
          }
        })
        .catch((error) => {
          this.progressFlag = false;
          this.progressPercent = 0;
          this.$message.error(error.message);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.show-img {
  width: 50px;
  height: 50px;
  &.big {
    width: 80px;
    height: 80px;
  }
}
>>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  height: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}

.imgProgress {
  position: absolute;
  left: 0;
  top: 0;
  >>> .el-progress-circle {
    width: 50px !important;
    height: 50px !important;
    background: #fff;
  }
}

.big {
  >>> .el-upload {
    height: 80px;
    .uploader-icon {
      width: 80px;
      height: 80px;
      line-height: 80px;
    }
  }
  .imgProgress {
    >>> .el-progress-circle {
      width: 80px !important;
      height: 80px !important;
    }
  }
}
</style>
